<template>
  <!-- 银行卡绑定 -->
  <view class="content">
    <view class="w-700 br-20 b_bai m-l-25 m-r-25">
      <input-container :title="'银行卡号:'">
        <input
          class="p-r-20 pl"
          type="text"
          placeholder="请输入银行卡号"
          v-model="form.cardnumber"
        />
      </input-container>
      <input-container :title="'开户行:'">
        <input
          class="p-r-20 pl"
          type="text"
          placeholder="请输入开户行"
          v-model="form.bandname"
        />
      </input-container>
      <input-container :title="'真实姓名:'">
        <input
          class="p-r-20 pl"
          type="text"
          placeholder="请输入真实姓名"
          v-model="form.name"
        />
      </input-container>
      <view class="p-b-30" @click="handleSubmit">
        <view class="btn br-60 w-580 h-80 t_c lh-80 m-l-60">提交/修改</view>
      </view>
    </view>
  </view>
</template>

<script>
import inputContainer from "./components/inputContainer.vue";
export default {
  components: {
    inputContainer,
  },
  data() {
    return {
      form: {
        // 银行卡号
        cardnumber: "",
        // 开户行
        bandname: "",
        // 真实姓名
        name: "",
      },
    };
  },
  methods: {
    // 提交或修改
    handleSubmit() {
      // 提交
      uni.request({
        url: "http://tzdj.1qit.com/api/common/bind_bank",
        method: "POST",
        data: {
          bank_num: this.form.cardnumber,
          bank_name: this.form.bandname,
          bank_user: this.form.name,
        },
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          console.log(res.data.code);
          if (res.data.code === 1) {
            uni.showToast({
              title: "卡信息修改成功",
              duration: 1500,
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          } else {
            uni.showToast({
              title: "卡信息修改失败",
              icon: "error",
            });
          }
        },
      });
    },
  },
  mounted() {
    // 回填
    uni.request({
      url: "http://tzdj.1qit.com/api/common/bind_bank",
      method: "GET",
      data: {},
      header: {
        token: uni.getStorageSync("token"),
      },
      success: (res) => {
        console.log(res);
        this.form.cardnumber = res.data.data.bank_num;
        this.form.bandname = res.data.data.bank_name;
        this.form.name = res.data.data.bank_user;
      },
    });
  },
};
</script>

<style lang="scss" scoped>
.pl {
  padding-left: 20rpx;
}
.content {
  .btn {
    background: #0a5aff;
    color: #fff;
  }
}
</style>